<template>
	<div class="completeorderinformation">
	<orderinformation :orderinformation="productlist"></orderinformation>
	<body class="body">
		<div class="product" @click="goProduct(productlist.productId)">
			<div class="productlist">
				<div class="productInfomation">
					<div class="left">
						<img :src="productlist.thumbnail" />
					</div>
					<div class="right">
						<p class="productName">{{productlist.productName}}</p>
						<p><span>租赁押金：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.deposit}}元</span></p>					
						<p><span>租赁价格：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.rentPrice}}</span><span style="color: #FF0000;">元/每天</span></p>
						<p class="shortDesc">{{productlist.shortDesc}}</p>
					</div>
				</div>
				<div class="rodertotalprice">
					<p class="ordertitle">订单总价</p>
					<!--<p class="deposit" v-if="!!productlist.rentAmountCost">￥{{productlist.rentAmountCost}}元</p>-->
					<p class="deposit" v-if="!!productlist.totalPay">￥{{productlist.totalPay}}元</p>
					<p class="deposit" v-else>￥{{productlist.deposit}}</p>
				</div>
				<div class="rellayprice">
					<p class="rellaytitle">{{styletitle}}</p>
					<p class="rellaypayment" v-if="!!productlist.rentAmountCost">￥{{productlist.rentAmountCost}}元</p>
					<p class="rellaypayment" v-else-if="!!productlist.totalPay">￥{{productlist.totalPay}}元</p>
					<p class="rellaypayment" v-else>￥{{productlist.deposit}}元</p>
				</div>	
			</div>
			<!--<div class="actives" v-if="productlist.favourables !== undefined && productlist.favourables.length >0">
			<p @click="active">现在付款有优惠哦</p>
			<compeleteactive v-show="isModalShow" :activeData="productlist" @close="close"></compeleteactive>
		</div>-->
		</div>
		<div class="preferentialactives" v-if="productlist.productFavourables !== undefined && productlist.productFavourables.length >0">
			<p class="titleactive">此订单享有的优惠活动</p>
			<div class="actives" v-for="(item,index) in productlist.productFavourables">
			  <h3>{{item.favourType}}</h3>
			  <p class="details">{{item.favourDesc}}</p>
			</div>
		</div>
		<div class="orderinformation">
			<p class="orderheader">订单信息</p>
			<div class="rodercontent">
			<p><span>订单编号：</span><span>{{productlist.rentSerial}}</span></p>
			<p><span>店铺名：</span><span>{{productlist.shopName}}</span></p>
			<p v-if="!!productlist.favourableAmount"><span>预付租金：</span><span>{{productlist.favourableAmount}}</span></p>
			<p><span>租赁天数：</span><span>{{productlist.rentDayCount}}天</span></p>
			<p><span>租金：</span><span>￥{{productlist.rentAmountCost}}元</span></p>
			<p v-if="!!productlist.pickTime"><span>取货时间：</span><span>{{productlist.pickTime}}</span></p>
			<p v-if="!!productlist.returnTime"><span>还货时间：</span><span>{{productlist.returnTime}}</span></p>
			<p><span>创建时间：</span><span>{{productlist.createTime}}</span></p>
			</div>
		</div>
	</body>
</div>
</template>
<script>
import orderinformation from '@/components/m-orderinformation/orderinformation'
import compeleteactive from '@/components/m-active/compeleteactive'
 
	export default {
		name:'completeorderinformation',
		components:{
			orderinformation,
			compeleteactive
		},
		data () {
			return {
		       productlist:{},
		       styletitle:'',
		       ordertime:'',
		       isModalShow:false
			}
		},
		mounted () {
			this.getPayInformation();
		},
		methods:{
			//获取付款详情
			getPayInformation () {
				console.log(this.$route.query.style_title)
				console.log(this.$route.query.order_time)
				this.styletitle = this.$route.query.style_title;
				this.ordertime = this.$route.query.order_time;
				this.$http.get(this.$store.state.reqUrl + this.$route.query.interface_url + '/' + this.$route.query.payNo_rentSerial,{					
				}).then(res => {
					if(res.status == 200) {
						 this.productlist = res.data;
					}
			    })
			},
			//到产品详情页
			goProduct (productId) {
				this.$router.push({
					path:'/productInfomation',
					query:{
						product_id:productId
					}
				});
			},
			//预付
			active () {
				this.active = true
			},
			//关闭模态框
			close (i) {
				this.isModalShow = i
			}
		}
	}
</script>

<style lang="less" scoped>
    .completeorderinformation{
    	font-size: 28px;
    	margin-top: 100px;
    	margin-bottom: 10px;
    	width:100%;  	
    	.body {
    		width:100%;
    		background: none;    		
    		.product {  
    			margin-bottom: 20px; 			
    			background: #FFFFFF;
    			.productlist{
    			padding:20px 20px;   			    			
    			.productInfomation {
    				display: flex;
    				.left {
    					width: 120px;
    					height: 120px;
    					img {
    						width: 100%;
    						height: 100%;
    					}
    				}
    				.right {
    					font-size: 26px;
    					flex: 1;
    					margin-left: 20px;
    					.productName{
    							color: #000000;
    							font-weight: 800;
    						}
    					.shortDesc{
    						line-height: 30px;
    					}
    				}
    			}
    		}
    		.rodertotalprice{
    			display: flex;
    			height: 40px;
    			font-size: 26px;
    			padding:20px 0;
    			color: #000000; 
    			.ordertitle{
    				flex: 1;
    			}
    			.deposit{
    				text-align: right;
    				flex: 1;
    			}
    		}
    		.rellayprice {
    			font-size: 26px;
    			color: #000000;     			
    			display: flex;
    			.rellaytitle{
    				flex: 1;
    			}
    			.rellaypayment{
    				color: #FF0000;
    				text-align: right;
    				flex: 1;
    			  }
    			}
    		}
    		.preferentialactives{
		     	width:100%;
		     	background: #FFFFFF;
		     	margin:20px 0 20px 0;
		     	.titleactive{
		     		padding: 20px 20px 30px 20px;
    				color: #000000;
    				font-weight: 700;
    				font-size: 28px;
		     	}
		     	.details{
		     		font-size: 24px;
		     		text-indent: 2em;
		     		line-height: 45px;
		     	}
		     	.actives{
		     		padding:5px 20px;
		     		h3{
		     			color: #FF0000;
		     			padding:0 20px;
		     			font-size: 26px;
		     		}
		     	}
		     }
    		.orderinformation{
    			font-size: 26px;
    			background: #FFFFFF;
    			.orderheader {
    				padding:20px 20px 10px 20px;
    				color: #000000;
    				font-weight: 700;
    				font-size: 28px;
    			}
    			.rodercontent{
    				line-height: 60px;
    				padding:20px 20px;    			
    		  }
    		}
    	}
    }
</style>